<template name="imgMsg">
	<view class="msgRow" :class="item.flow">
		<image class="userAvatar" :src="item.flow=='in'?toInfo.avatar:myInfo.avatar"></image>
		<view class="msgBox imgMsg">
			<block v-if="item.payload.imageInfoArray[0].width != 0">
				<image mode="widthFix" :src="item.payload.imageInfoArray[0].url" :style="{'width':(item.payload.imageInfoArray[0].width<cWidth?item.payload.imageInfoArray[0].width:cWidth)+'px'}" @tap="showImg" :data-img="item.payload.imageInfoArray[0].url" ></image>
			</block>
			<block v-else>
				<image mode="widthFix" :src="item.payload.imageInfoArray[0].url" :style="{'width':cWidth+'px'}" @tap="showImg" :data-img="item.payload.imageInfoArray[0].url"></image>
			</block>
		</view>
	</view>
</template>

<script>
	export default{	
		name:'imgMsg',		//组件名称
		// 传递参数
		props:{
			item:{
				type:Object,
				default:null
			},
			myInfo:{
				type:Object,
				default:null
			},
			toInfo:{
				type:Object,
				default:null
			}
		},
		// 组件参数
		data(){
			return {
				cWidth: uni.getSystemInfoSync().screenWidth - uni.upx2px(300),
			}
		},
		// 组件方法
		methods:{
			// 点击预览图片
			showImg(e) {
				let arr = [e.currentTarget.dataset.img];
				uni.previewImage({
					urls: arr
				});
			},
		}
	}
</script>

<style lang="less">
	.covDtList {
	
		padding: 20upx 32upx;
		box-sizing: border-box;
	
		.msgRow {
			display: flex;
			align-items: flex-start;
			padding-right: 118upx;
			margin-bottom: 20upx;
	
			.userAvatar {
				width: 86upx;
				height: 86upx;
				border-radius: 50%;
				margin-right: 32upx;
				flex-shrink: 0;
			}
	
			.msgBox {
				background-color: #FFFFFF;
				border-radius: 10upx;
				position: relative;
				padding: 20upx 20upx;
				display: flex;
				align-items: center;
				min-height: 86upx;
	
				.jiantou {
					width: 20upx;
					height: 20upx;
					background-color: #FFFFFF;
					border-radius: 4upx;
					position: absolute;
					top: 43upx;
					left: -10upx;
					transform: translateY(-50%) rotate(45deg);
				}
	
				.msgCnt {
					font-size: 28upx;
					display: flex;
					align-items: center;
	
					.emoji {
						width: 36upx;
						height: 36upx;
					}
				}
			}
	
			.imgMsg {
				flex-grow: 0;
				overflow: hidden;
				padding: 0;
			}
		}
	
		.out {
			padding-left: 118upx;
			padding-right: 0;
			justify-content: flex-end;
	
			.userAvatar {
				order: 2;
				margin-right: 0;
				margin-left: 32upx;
			}
	
			.msgBox {
				order: 1;
	
				.jiantou {
					right: -10upx;
					left: auto;
				}
			}
		}
	
	}
	.orderMsg {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		align-items: flex-start !important;
	
		.orderTishi {
			font-size: 24rpx;
			color: #8e8e8e;
			margin-bottom: 20upx;
		}
	
		.goodBox {
			display: flex;
			background-color: #f6f6f6;
			border-radius: 10upx;
			width: 100%;
			image {
				width: 146upx;
				height: 146upx;
				border-radius: 10upx;
				flex-shrink: 0;
				margin-right: 18upx;
			}
	
			.goodInfo {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				padding: 5upx 5upx 5upx 0;
	
				.goodTitle {
					font-size: 32rpx;
					color: #222433;
				}
	
				.paymentInfo {
					display: flex;
	
					.paymentTishi {
						font-size: 24upx;
					}
	
					.paymentCount {
						font-size: 30rpx;
						color: #ed2e2e;
					}
				}
			}
		}
	
		.orderOp {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			margin-top: 18upx;
	
			button {
				margin: 0;
				height: 62upx;
				border-radius: 31upx;
				border: none;
				background: linear-gradient(to right, #ff6829, #ff2f36);
				color: #FFFFFF;
				padding: 0 50upx;
				line-height: 62upx;
				font-size: 28upx;
				font-weight: bold;
			}
	
			button:after {
				border: none;
			}
		}
	}
	
	.emojiScroll {
		background-color: #f6f6f6;
	
		// transition: all 0.3s; 
		.emojiFlexBox {
			display: flex;
			flex-wrap: wrap;
			padding: 20upx 15upx;
	
		}
	
		.emojiImgBox {
			width: 80upx;
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
	
			image {
				width: 60upx;
				height: 60upx;
			}
		}
	
	}
	
</style>
